<template>
  <!-- 显示用户的好友信息 -->
  <div>
    <el-card
      class="user-card"
      v-for="(friend, index) in friendList"
      :key="index"
    >
      <!-- 每个用户的卡片信息 -->
      <div class="content" @click="emitUserId(friend, index)">
        <!-- 卡片头像 -->
        <img :src="friend.friendAvatarUrl" alt="" class="user-avatar" />
        <!-- 卡片用户名 -->
        <div class="username">
          {{ friend.friendNickName }}
        </div>
        <!-- 新消息标记 -->
        <div class="msg-notice" v-if="friend.newMsg">
          <span>{{ friend.newMsgCount }}</span>
        </div>
        <!-- 卡片聊天发送时间 -->
        <div class="send-time" v-if="friend.lastMessageTime">
          {{ friend.lastMessageTime }}
        </div>
        <!-- 卡片最后一次聊天发送的内容 -->
        <div class="last-message" v-if="friend.lastMessage">
          {{ friend.lastMessage }}
        </div>
        <div class="last-message" v-if="!friend.lastMessage">
          暂没有聊天信息
        </div>
      </div>
    </el-card>

    <div class="not-friend" v-if="notFriend">
      <span>你还没有好友哦！<br />去搜索一些好友添加一下吧</span>
    </div>
  </div>
</template>

<script>
import UserApiRequest from "@/api/UserApiRequest";
const userApiRequest = new UserApiRequest();
export default {
  data() {
    return {
      userInfo: {},
      friendList: [],
      sendAndAcceptMessage: [],
      notFriend: false,
    };
  },
  props: {
    cardNotice: {
      default: null,
    },
    mySendMsg: {
      default: null,
    },
  },
  methods: {
    emitUserId(data, index) {
      if (this.friendList[index].newMsg) {
        this.friendList[index].newMsg = false;
        this.friendList[index].newMsgCount = null;
      }
      this.$emit("clickFriend", data, index);
    },
  },
  mounted() {
    if (this.$store.state.isLogin) {
      this.userInfo = this.$store.state.userInfo;
      // 获取好友列表
      let data = {
        userId: this.userInfo.uid,
      };
      userApiRequest.getUserFriend(data).then((res) => {
        this.friendList = res.data;
        if (this.friendList.length === 0) {
          this.notFriend = true;
        }
      });
    }
  },
  watch: {
    cardNotice(newVal) {
      const userId = newVal.userId;
      this.friendList.forEach((friend) => {
        if (friend.friendUserId === userId) {
          friend.newMsg = true;
          if (!friend.newMsgCount) {
            friend.newMsgCount = 1;
          } else {
            friend.newMsgCount++;
          }
        }
      });
    },
    mySendMsg(newVal) {
      const userId = newVal.toUserId;
      this.friendList.forEach((friend) => {
        if (friend.friendUserId === userId) {
          friend.lastMessage = newVal.message;
          friend.lastMessageTime = "刚刚";
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user-card {
  padding: 14px;
  cursor: pointer;
  .content {
    position: relative;
    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      float: right;
    }
    .username {
      font-weight: 700;
      margin: 10% 0;
      font-size: 16px;
    }
    .send-time {
      font-size: 1em;
      color: rgba(0, 0, 0, 0.4);
    }
    .last-message {
      font-size: 12px;
      margin-top: 4%;
    }
    .msg-notice {
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: -2px;
      right: -2px;
      color: #fff;
      font-size: 10px;
    }
  }
}
.not-friend {
  font-size: 12px;
  margin-top: 100%;
  text-align: center;
}
</style>
